Creative direction

The evening
star of your
library.

Vesper is the first star at dusk — the moment the house goes quiet and you choose something to watch. The product promise: all your entertainment in one beautiful, personal library.

The interface steps back so artwork can lead. Deep ink backgrounds, one warm accent used sparingly, an editorial serif for titles and a precise grotesk for everything you read and tap. Sources, servers and filenames live in Settings — never in the living room.

One title, one pageCopies from every source merge into a single poster. Versions are a detail, not a duplicate.

Artwork leadsChrome recedes. Text sits on scrims, never on raw imagery.

Honest by default“Recently added” means added. Unknown means unknown. No invented trends.

Calm motionShort, eased, purposeful. Everything still works with motion off.

Wordmark

Vesper

Instrument Serif set in sentence case, followed by the evening star — an amber dot aligned to the cap height. Minimum height 20 px on screen. The app icon uses the V and the star only. Never outline, stretch or recolour the star.

Colour

Ink#0B0C10 · page

Surface#14161C · sheets, cards

Raised#1C1F27 · selected, menus

Parchment#F3F1EC · text, primary, focus · 17.6:1

Text 2#B8B5AD · 9.6:1 on ink

Text 3#8C897F · 5.6:1 · meta only

Ember (accent)#E8A85F · progress, eyebrows, star

Signal#E5484D · LIVE, destructive

Caution#E8C35F · unavailable, expiry

Clear#6CC49A · connected, done

Ember appears on at most a few elements per screen. State colours always travel with a word or shape — “LIVE”, “Watched ✓”, “Refresh failed” — so meaning never depends on colour alone. Each title carries a tint (a deep, desaturated hue) used for loading states, missing artwork and ambient backgrounds.

Typography

AaInstrument Serif — DisplayTitles, page headings, poster lockups, collection names. Never below 18 px. Never for UI controls or body copy.

AaHanken Grotesk — InterfaceNavigation, buttons, metadata, synopses, settings. 400 / 500 / 600 / 700. Tabular figures for times.

AaJetBrains Mono — TechnicalServer addresses, usernames and IDs — in Settings only. Its presence signals “this is plumbing”.

RoleSpecimenTVWebiOS

Hero titleInterstellar15056–10464

Page titleMy List886440

Poster lockupShutter Island3422–2818

Row headingBecause You Watched Severance342019

Body / synopsisA cartographer discovers the coastline is redrawing itself each night.281715

EyebrowAdded yesterday · Science Fiction221211

Meta / captionS2 · E4 · 29 min left221312

TV sizes are for a 1920×1080 canvas viewed at ~3 m; nothing on TV is smaller than 20 px.

Spacing & layout

Android TV96 px side / 48 px top title-safe margins. Row gap 64. Card gap 32. Focus lifts 6–8%, so rows reserve 20 px vertical padding.

WebMargins clamp(24, 4vw, 56). Row gap 44. Narrow (<760) switches to 20 px margins, smaller cards and a stacked sheet for Versions.

iOS20 pt margins inside safe areas. 44 pt minimum targets. Tab bar 49 pt + home indicator. Sheets use 22 pt top radius.

Radii stay small: 6 px posters, 8–10 px cards, 12–14 px panels, full pills only for buttons and chips. Shadows only under lifted artwork.

Artwork

Shutter Island

Poster 2:3Rows, grids, My List

Landscape 16:9Continue Watching, episodes, Recently Added

Channel 1:1Logo or monogram

Person 1:1Initials until a photo exists

No artwork yetLost in Translation

Missing artworkTint + typographic lockup

Artwork retains its original color and typography. A film has the same poster and backdrop on every platform. Poster artwork stands on its own without an extra title overprinted; landscapes use a restrained lower scrim for readable labels. Heroes use side and bottom scrims. Missing images retain a title and tint. This preview bundles real artwork locally so catalog browsing does not depend on third-party image requests.

Components & states

DefaultHover (web)FocusPressedDisabled Primary (web/iOS) ▶ Play ▶ Play ▶ Play ▶ Play Needs connection Secondary Versions · 4 Versions · 4 Versions · 4 Versions · 4 Versions · 4 TV button Resume — no hover on TV — Resume Resume Unavailable Poster card

Version row

4K Dolby Vision · Theatrical · English (original)From Living Room Server Preferred

1080p · Theatrical · Español (dubbed)From Northline Source not responding

Aligned columns — picture, edition, audio, subtitles, length — so differences read at a glance. Unknown values say “Unknown”. Source names appear only here.

Badges & status

LIVE✓ WatchedPG-13Not rated

ConnectedExpires in 8 daysRefresh failed

S2 · E4 · 29 min left

Progress is always paired with a time label. Status pills pair colour with text and a shape (round = fine, square = problem).

Motion

Focus · 150 msease-out. Scale 1.06–1.08 on TV, lift 3–4 px on web hover.

Row scroll · 300 msSmooth, keeps the focused item ≥96 px from the edge.

Sheets · 250–300 mscubic-bezier(.2,.8,.2,1). Fade for side panels, rise for iOS sheets.

Player chrome · 350 msFades out after 3.5–4 s of inactivity; any input brings it back.

Reduced motion: transitions and scaling collapse to instant changes; focus remains a high-contrast ring and fill. No autoplaying trailers, no parallax, no auto-advancing hero.

Required states

Tinted skeletons in final card sizes — no layout jump.

Cached launchUpdating libraryHome opens instantly from cache. A quiet label in the nav refreshes in the background, then disappears.

Offline

You’re offline. Browsing your saved library. Playback needs a connection.

Browse = yes, stream = no. Play turns to “Needs connection”.

Source unavailable

Unavailable right now — Northline, the only source with this title, isn’t responding.

Titles stay visible; only playback is blocked. Versions from other sources still play.

Partial metadata

Director: Not available
Rating: Not rated
Released: 2024

Say what’s missing. Never fill gaps with guesses.

Empty libraryYour library is emptyExplain why, then offer “Add a source” and “Check sources”.

Playback errorCouldn’t play from NorthlineOffer the next-best version (with timing warning if editions differ), Try again, and Back. Position is preserved.

Missing episode

6Episode 6 isn’t in your library. Resume and autoplay skip it.

Use the Design preview menu to exercise the available offline, source-failure, playback-failure and empty-library states. Missing-episode and partial-metadata panels above are component specifications; the real catalog snapshot does not manufacture missing records.

Platforms

Android TVTop nav pills; D-pad spatial navigation; focus = parchment fill + scale. Back closes panels → leaves player → returns to the card you came from → jumps to nav. Each row remembers its last focused item. Timeline seeks with ◀ ▶; OK pauses.Open TV prototype

iOSTab bar (Home, Search, Live, My List); Movies/Series as chips. Bottom sheets for Versions. Portrait browsing, landscape playback, tap-to-reveal controls. 44 pt targets, safe areas respected.Open iOS prototype

WebTop nav; full keyboard support (Tab, / for search, Space, ← →, Esc). Hover lifts are enhancements only — rows also have visible arrow buttons. Responsive to a single-column narrow layout.Open Web prototype

What’s real vs simulated

Portable logic — vesper-data.jsPreferred-version picking, resume-target rules (skips missing or unavailable episodes, advances after finished ones), Continue Watching assembly, My List/progress store API, time formatting, guide maths. The TV spatial-focus engine (in Vesper TV) is framework-free and reusable.

SimulatedXtream source validation and import, version availability, live schedules, video playback, Trakt and cloud sync. My List, progress and preferences persist locally and synchronize between tabs on the same browser origin. This does not establish cross-device sync.